<template>
  <div class="price color-9 unified-bg">
    <div class="main">

      <div class="main-top boxShadow">
        <div class="top-sub">
          <p>厂家</p>
          <div @click="selectClick('vender')">{{ venderLable }} <i class="icon iconfont">&#xe612;</i></div>
        </div>
        <div class="top-sub">
          <p>终端型号</p>
          <div @click="selectClick('model')">{{ modelName }} <i class="icon iconfont">&#xe612;</i></div>
        </div>
        <div class="top-sub">
          <p>程序</p>
          <div @click="selectClick('program')">{{ programLabel }} <i class="icon iconfont">&#xe612;</i></div>
        </div>
      </div>

      <div class="list-warp"
           v-infinite-scroll="loadMore1"
           infinite-scroll-disabled="faultLloading"
           infinite-scroll-immediate-check="false"
           infinite-scroll-distance="10">
        <div class="center" v-for="(item, index) in list">

          <!--烘干机-->
          <ul class="main-center boxShadow"  id="dryer" v-show="item.deviceTypeId == '2'">
            <li class="li1">
              <div style="position: relative">
                <span class="icon-hgj we-icon"></span>
                <div class="li1-main1">
                  <div class="li1-sub1">
                    <p class="p1">厂家： <span class="color-y-f7 font-b">{{ item.venderName }}</span></p>
                    <p class="p2">型号：  <span class="color-f8 font-b">{{ item.modelName }}</span></p>
                  </div>
                  <div class="li1-sub2 color-y-ef">烘干机</div>
                </div>
              </div>
              <div class="li1-main2">
                <span class="span1">程序模式 &nbsp;&nbsp;<i class="color-6 font-b">{{ item.instructionName }}</i></span>
                <span class="span2 color-ff3">&yen; <i>{{ item.price }}</i></span>
              </div>

            </li>
            <li class="li2 bg-y-ffe">
              <a href="javascript:;" class="weui-btn weui-btn_primary bg-y-btn"
                 @click="setPrice([item.modelName, item.instructionName, item.price, item.modelInstructionid])">设置价格</a>
            </li>
          </ul>

          <!--洗衣机-->
          <ul class="main-center boxShadow" id="washer" v-show="item.deviceTypeId == '1'">
            <li class="li1">
              <div style="position: relative">
                <span class="icon-xyj we-icon"></span>
                <div class="li1-main1">
                  <div class="li1-sub1">
                    <p class="p1">厂家： <span class="color-2f font-b">{{ item.venderName }}</span></p>
                    <p class="p2">型号：  <span class="color-f8 font-b">{{ item.modelName }}</span></p>
                  </div>
                  <div class="li1-sub2" style="color:#2a90f5">洗衣机</div>
                </div>
              </div>
              <div class="li1-main2">
                <span class="span1">程序模式 &nbsp;&nbsp;<i class="color-4c font-b">{{ item.instructionName }}</i></span>
                <span class="span2 color-ff3">&yen; <i>{{ item.price }}</i></span>
              </div>

            </li>
            <li class="li2 bg-b-f3">
              <a href="javascript:;" class="weui-btn weui-btn_primary bg-b-btn"
                 @click="setPrice([item.modelName, item.instructionName, item.price, item.modelInstructionid])">设置价格</a>
            </li>
          </ul>

        </div>

        <!--加载更多效果-->
        <div class="weui-loadmore" v-show="loading">
          <i class="weui-loading"></i>
          <span class="weui-loadmore__tips">正在加载</span>
        </div>
        <noData v-if="list.length == 0 && !debut">
          <p>暂无数据</p>
        </noData>
        <div class="weui-loadmore weui-loadmore_line" v-show="noData" v-else>
          <span class="weui-loadmore__tips">我是有底线的</span>
        </div>
      </div>
    </div>

    <!--设置价格弹窗-->
    <QDialog title="设置程序价格" class="price-wrap" v-model="dialogStatusCood" :open="clear">
       <div class="box">
         <div class="top">
           <div class="model">型号：<span>{{ dialog.model }}</span></div>
           <div class="ms">模式：<span>{{ dialog.ms }}</span></div>
         </div>
         <div class="center">
          <span> 程序价格：</span>
           <input type="text" v-model="dialog.price">
           <span style="padding-left:3px;">元</span>
         </div>
         <div class="footer">
           * 该价格生效于所有型号为 <span>{{ dialog.model }}</span>的设备
         </div>
         <div class="btn-a">
           <a href="javaScript:;" @click="update">确认修改</a>
           <a href="javascript:;" @click="cancel()">取消</a>
         </div>
       </div>
    </QDialog>
  </div>
</template>
<script>
  import QDialog from '@/components/q_dialog';
  import * as api from 'api';
  import noData from '@/components/noData';
  let instruction = [{ label: '全部', value: '' }]
  let model = [{ label: '全部', value: '' }]
  let vender = [{ label: '全部', value: '' }]
  export default {
    data () {
      return {
        debut: true,
        dialogStatusCood: false,
        faultLloading: false,
        noData: false,
        loading: false,
        dialog: {
          modelInstructionId: '',
          model: 'xxx',
          ms: 'xx',
          price: '0'
        },
        vender: [],
        venderId: '',
        modelId: '',
        model: [],
        program: [],
        programType: '全部',
        venderLable: '全部',
        venderValue: '',
        programLabel: '全部',
        programValue: '',
        instructionId: '',
        numType1: 1,
        numType2: 1,
        priceLloading: false,
        listX: {
          model: '',
          vender: '',
          type: '',
          price: ''
        },
        listH: {
          model: '',
          vender: '',
          type: '',
          price: ''
        },
        page: 0,
        list: [],
        modelName: []
      }
    },
    components: {
      QDialog,
      noData
    },
    methods: {
      // 程序定价查询模式
      queryInstruction () {
        api.queryInstruction({
          agencyId: this.$store.state.userInfo.id
        })
          .then(res => {
            res.resultData.forEach((item, index) => {
              let value = item.instructionId
              let label = item.instructionName
              instruction.push({ label, value })
            })
            this.program = instruction
          })
      },

      // 程序定价查询型号
      queryProductModel () {
        api.queryProductModel({
          agencyId: this.$store.state.userInfo.id
        })
          .then(res => {
            res.resultData.forEach((item, index) => {
              let value = item.modelName
              let label = item.modelName
              model.push({ label, value })
            })
            this.model = model
          })
      },

      // 程序定价查询厂家
      queryVender () {
        api.queryVender({
          agencyId: this.$store.state.userInfo.id
        })
          .then(res => {
            res.resultData.forEach((item, index) => {
              let value = item.venderId
              let label = item.venderName
              vender.push({ label, value })
            })
            this.vender = vender
          })
      },

      // 打开设置价格弹窗
      setPrice (data) {
        this.dialogStatusCood = !this.dialogStatusCood
        console.log(data);
        this.dialog.model = data[0]
        this.dialog.ms = data[1]
        this.dialog.price = data[2]
        this.dialog.modelInstructionId = data[3]
      },

      // 查询列表
      query (loadMore, data) {
        api.queryFeePolicy({
          offset: this.page * 10,
          limit: 10,
          agencyId: this.$store.state.userInfo.id,
          venderId: this.venderValue,
          modelName: this.modelName === '全部' ? '' : this.modelName,
          instructionId: this.programValue
        })
          .then(res => {
            this.debut = false
            if (loadMore) {
              if (this.list.length >= res.total) {
                this.faultLloading = true;
                this.loading = false;
                this.noData = true;
                this.page = 0;
              } else {
                this.list = this.list.concat(res.resultData);
                this.faultLloading = false;
                this.loading = false;
              }
            } else {
              this.list = res.resultData;
              this.faultLloading = false;
            }
          })
      },

      // 设置价格
      update () {
        this.dialogStatusCood = !this.dialogStatusCood
        api.setFeePolicy({
          modelInstructionId: this.dialog.modelInstructionId,
          agencyId: this.$store.state.userInfo.id,
          price: this.dialog.price
        })
          .then((res) => {
            this.dialog.model = ''
            this.dialog.ms = ''
            this.dialog.price = ''
            this.dialog.modelInstructionId = ''
            this.page = 0
            this.query()
            console.log(res)
          })
      },

      // 取消修改
      cancel () {
        this.dialogStatusCood = !this.dialogStatusCood
      },

      clear () {
        this.dialog.price = ''
      },

      selectClick (val) {
        var that = this
        // 厂家
        if (val === 'vender') {
          weui.picker(that.vender, {
            className: 'custom-classname',
            defaultValue: [0],
            onChange: function (result) {
            },
            onConfirm: function (result) {
              that.venderValue = result[0].value;
              that.venderLable = result[0].label;
              // 查询
              that.query(false, ['vender', result[0]])
            },
            id: 'singleLinePicker1'
          })
        }
        // 型号
        if (val === 'model') {
          weui.picker(that.model, {
            className: 'custom-classname2',
            defaultValue: [0],
            onChange: function (result) {
            },
            onConfirm: function (result) {
              console.log(result[0]);
              that.modelName = result[0].label;
              // 查询
              that.query(false, ['model', result[0]])
            },
            id: 'singleLinePicker2'
          })
        }
        // 程序
        if (val === 'program') {
          weui.picker(that.program, {
            className: 'custom-classname3',
            defaultValue: [0],
            onChange: function (result) {
            },
            onConfirm: function (result) {
              that.programValue = result[0].value;
              that.programLabel = result[0].label;
              // 查询
              that.query(false, ['program', result[0]])
            },
            id: 'singleLinePicker3'
          })
        }
      },
      loadMore1 () {
        this.faultLloading = true;
        this.loading = true;
        this.page++;
        this.query(true)
      }
    },
    mounted () {
      this.title('程序定价');
    },
    created () {
      this.modelName = this.$route.query.model ? this.$route.query.model : '全部';
      this.query();
      this.queryInstruction();
      this.queryProductModel();
      this.queryVender();
    }
  }
</script>
<style>
  .weui-btn::after {
    border: none;
  }
</style>
<style lang="scss" >
  @import '../../../styles/agent/personal/price';
  .weui-btn:after {
    @include wh(0, 0)
  }
  .price {
    div.header {
      color: #333;
      font-size: px2rem(30);
    }
    div.box{
      color: #4c4c4c;
      font-size: px2rem(26);
      .top {
        @include fj();
      }
      .center {
        margin: px2rem(20) 0 px2rem(10);
        input {
          @include wh(px2rem(150), px2rem(55));
          @include borderRadius(3px);
          padding: 0 px2rem(10);
          border: 1px solid #dbdbdb;
        }
      }
      .footer {
        font-size: px2rem(24);
        color: #666;
      }
      .btn-a {
        margin-top: px2rem(50);
        text-align: right;
        a {
          font-size: px2rem(28);
          padding: px2rem(13) px2rem(20);
          @include borderRadius(4px);
          background: #4ec2f3;
          color: #fff;
        }
      }
    }
  }
</style>

